<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Online Performance Dashboard</title>
	
	<link rel="stylesheet" type="text/css" href="css/bootstrap/lumen/bootstrap.css">
	
	<style type="text/css">
		.enter{
			margin:1px;
		}
		
		.badge-sucess{
			background-color: #28b62c;
			margin:1px;
		}
		
		.badge-primary{
			background-color: #158cba;
			margin:1px;
		}
		
		.badge-danger{
			background-color: #ff4136;
			margin:1px;
		}
	</style>

<script type="text/javascript" src="js/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
$(function () {

    $(document).ready(function () {

        // Build the chart
        $('#pie-chart-container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Κατάτμηση Καταχωριτικού Κέντρου'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    /*['Πάνω από το στόχο',   60.0],*/
                    {name: 'Πάνω από το στόχο', y: 60.0, color: '#28b62c'},
                    /*['Έως και 20% κάτω από το στόχο', 30.0, '#158cba'],*/
                    {name: 'Έως και 20% κάτω από το στόχο', y: 22.9, color: '#158cba'},
                    {
                        name: 'Κάτω από το στόχο',
                        y: 17.1,
                        color: '#ff4136',
                        sliced: true,
                        selected: true
                        
                    }
                ]
            }]
        });
    });

});
		</script>
			
	
</head>
<body>

<script type="text/javascript" src="js/libs/Highcharts-4.0.4/highcharts.js"></script>


<h3  class="text-primary">Δευτέρα, 06/10/2014 08:10 π.μ.</h3>

<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">105 Καταχωριστές (60%)</h3>  
  </div>
  <div class="panel-body">
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#">;<span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
    <a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a><a href="#"><span class="badge badge-sucess">3</span></a>
  </div>
</div>


<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">40 Καταχωριστές (22,9%)</h3>
  </div>
  <div class="panel-body">
    <a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a>
    <a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a>
    <a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a>
    <a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a>
    <a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a>
    <a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a>
    <a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a>
    <a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a><a href="#"><span class="badge badge-primary">3</span></a>
  </div>
</div>


<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">30 Καταχωριστές (17,1%)</h3>
  </div>
  <div class="panel-body">
    <a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a><a href="#"><span class="badge badge-danger">3</span></a>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 60%">105 Καταχωριστές (60%)</div>
  <div class="progress-bar progress-bar-primary" style="width: 22.9%">40 Καταχωριστές (22.9%)</div>
  <div class="progress-bar progress-bar-danger" style="width: 17.1%">30 Καταχωριστές (17.1%)</div>
</div>

<div id="pie-chart-container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

</body>
</html>